<template>
  <div class="tree2">
    <div style="display:flex">
      <el-input size="mini" placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
      <el-button
        type="primary"
        size="mini"
        class="add_new_question"
        @click="add_new_question"
        >添加父节点</el-button>
    </div>

    <div class="question_info_lists">
      <el-tree
        ref="tree"
        :key="tree_key"
        :data="treeData"
        node-key="id"
        highlight-current
        :render-content="renderContent"
        :expand-on-click-node="false"
        :default-expanded-keys="defaultExpand"
        show-checkbox
        :filter-node-method="filterNode"
      ></el-tree>

      <el-row class="add_question" v-show="add_question_flag">
        <el-col :span="12">
          <el-input size="mini" v-model="new_question_name" placeholder="请输入大题名称"></el-input>
        </el-col>

        <el-col :span="12">
          <el-button
            size="mini" 
            class="btn_sure"
            @click.stop="add_question_sure"
            >确定</el-button>

          <el-button
            size="mini"
            class="btn_cancel"
            @click.stop="add_question_cancel"
            >取消</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      filterText: "",
      treeData: [
        {
          id: 1,
          label: "一级 1",
          isEdit: false,
          children: [
            {
              id: 4,
              label: "二级 1-1",
              isEdit: false,
              children: [
                { id: 9, label: "三级 1-1-1", isEdit: false, children: [] },
                {
                  id: 10,
                  label: "三级 1-1-2",
                  isEdit: false,
                  children: [],
                },
                {
                  id: 11,
                  label: "三级 1-1-3",
                  isEdit: false,
                  children: [],
                },
              ],
            },

            {
              id: 12,
              label: "二级 1-2",
              isEdit: false,
              children: [],
            },

            {
              id: 13,
              label: "二级 1-3",
              isEdit: false,
              children: [],
            },
          ],
        },

        {
          id: 2,
          label: "一级 2",
          isEdit: false,
          children: [
            { id: 5, label: "二级 2-1", isEdit: false, children: [] },
            {
              id: 6,
              label: "二级 2-2",
              isEdit: false,
              children: [],
            },
          ],
        },

        {
          id: 3,
          label: "一级 3",
          isEdit: false,
          children: [
            { id: 7, label: "二级 3-1", isEdit: false, children: [] },
            {
              id: 8,
              label: "二级 3-2",
              isEdit: false,
              children: [],
            },
          ],
        },
      ],
      add_question_flag: false,
      new_question_name: "",
      tree_key: 0,
      defaultExpand: [],
    };
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 结构树操作group node,
    renderContent(h, { node, data, store }) {
      return (
        <span>
          <span class="el-icon-document">{this.showOrEdit(data)}</span>
          <div class="tree_node_op" style=" float: right">
            <i
              class="el-icon-edit"
              on-click={(ev) => this.nodeEdit(ev, store, data)}
            ></i>
            <i
              class="el-icon-delete"
              on-click={() => this.nodeDelete(node, data)}
            ></i>
            <i
              class="el-icon-upload2"
              on-click={() => this.nodeUp(node, data)}
            ></i>
            <i
              class="el-icon-download"
              on-click={() => this.nodeDown(store, node, data)}
            ></i>
            <i
              class="el-icon-plus"
              on-click={() => this.append(store, node, data)}
            ></i>
          </div>
        </span>
      );
    },
    // 添加新大题
    add_new_question() {
      this.add_question_flag = true;
    },

    add_question_sure() {
      //确定
      const nodeObj = {
        id: "",
        label: this.new_question_name,
        isEdit: false,
        children: [],
      };
      this.treeData.push(nodeObj);
      this.add_question_flag = false;
    },

    add_question_cancel() {
      //取消
      this.add_question_flag = false;
      this.new_question_name = "";
    },

    //   增加
    append(store, node, data) {
      var maxid = "10000";
      //新增数据
      const nodeapp = {
        id: ++maxid,
        label: "新增加节点",
        isEdit: false,
        children: [],
      };
      data.children.push(nodeapp);
      if (!node.expanded) {
        node.expanded = true;
      }
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const cIndex = children.findIndex((d) => d.id === data.id);
      const tempChildrenNodex2 = children[cIndex]; //拿到被添加的上一级
      console.log(tempChildrenNodex2.children[cIndex - 1]);
    },

    // 修改
    nodeEdit(ev, store, data) {
      data.isEdit = true;
      this.$nextTick(() => {
        const $input =
          ev.target.parentNode.parentNode.querySelector("input") ||
          ev.target.parentElement.parentElement.querySelector("input");

        !$input ? "" : $input.focus();
      });
    },
    edit_sure(ev, data) {
      const $input =
        ev.target.parentNode.parentNode.querySelector("input") ||
        ev.target.parentElement.parentElement.querySelector("input");

      if (!$input) {
        return false;
      } else {
        data.label = $input.value;
        data.isEdit = false;
      }
    },

    // 节点删除
    nodeDelete(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },

    // 节点上移
    nodeUp(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const cIndex = children.findIndex((d) => d.id === data.id);
      if (parent.level === 0 && cIndex === 0) {
        return;
      } else if (parent.level !== 0 && cIndex === 0) {
        //不同父节点中移动
        alert("不同父节点中移动");

        // const parent2 = parent.parent
        // const children2 = parent2.data.children || parent2.data
        // const pIndex2 = parseInt(children2.findIndex(p => p.id === parent.data.id), 10) - 1

        // if (pIndex2 < 0) return
        // children2[pIndex2].children.push(data)
        // children.splice(cIndex, 1)

        // this.defaultExpand[0] = children2[pIndex2].id
      } else if (
        (parent.level === 0 && cIndex !== 0) ||
        (parent.level !== 0 && cIndex !== 0)
      ) {
        const tempChildrenNodex1 = children[cIndex - 1];
        const tempChildrenNodex2 = children[cIndex];
        this.$set(children, cIndex - 1, tempChildrenNodex2);
        this.$set(children, cIndex, tempChildrenNodex1);
        this.defaultExpand[0] = data.id;
      }
      this.tree_key++;
    },

    // 节点下移
    nodeDown(store, node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const cIndex = children.findIndex((d) => d.id === data.id);
      const cLength = children.length - 1; // 最边上的节点
      const allLevel = store.data.length - 1; // 树的深度

      if (parent.level === allLevel && cIndex === cLength) {
        // 最最末的节点
        return;
      } else if (parent.level !== allLevel && cIndex === cLength) {
        //父节点不同
        alert("不能移动");
        // const parent2 = parent.parent

        // const children2 = parent2.data.children || parent2.data

        // const pIndex2 = parseInt((children2.findIndex(p => p.id === parent.data.id)), 10)

        // if (pIndex2 === allLevel) return

        // children2[pIndex2 + 1].children.push(data)

        // children.splice(cIndex, 1)

        // this.defaultExpand[0] = children2[pIndex2 + 1].id
      } else if (
        (parent.level === allLevel && cIndex !== cLength) ||
        (parent.level !== allLevel && cIndex !== cLength)
      ) {
        // 父节点相同

        const tempChildrenNodex1 = children[cIndex + 1];
        const tempChildrenNodex2 = children[cIndex];

        this.$set(children, cIndex + 1, tempChildrenNodex2);
        this.$set(children, cIndex, tempChildrenNodex1);
        this.defaultExpand[0] = data.id;
      }
      this.tree_key++;
    },

    showOrEdit(data) {
      if (data.isEdit) {
        return (
          <input
            type="text"
            value={data.label}
            on-blur={(ev) => this.edit_sure(ev, data)}
          />
        );
      } else {
        return <span className="node_labe">{data.label}</span>;
      }
    },


  },

  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
};
</script> 

<style lang="scss" scoped>
.tree2{
  width: 25%;
  /deep/.el-tree{
    background-color: #e2e3e4 !important;
  }
  /deep/.el-tree-node__label{
    font-size: 14px;
    letter-spacing: 1px;
  }
  /deep/.el-tree--highlight-current .is-current > .el-tree-node__content{
    background-color: #2ec5cf;
  }
}
</style>
